<template>
  <div id="mynews">
    <el-breadcrumb>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>我的消息</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="mymain">
      <!-- <el-menu
        default-active="/home/personalcenter/mynews/all"
        class="el-menu-demo"
        mode="horizontal"
        :router="true"
      >
        <el-menu-item index="/home/personalcenter/mynews/all"
          >全部</el-menu-item
        >
        <el-menu-item index="/home/personalcenter/mynews/todo"
          >待办</el-menu-item
        >
      </el-menu> -->
      <div class="line"></div>
    </div>
    <div id="main">
      <div id="all">
        <el-form :inline="true" :model="searchData" class="demo-form-inline">
          <el-form-item label="发件人">
            <el-input v-model="searchData.people"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchData.type" placeholder="请选择">
              <el-option label="未读" value="未读"></el-option>
              <el-option label="已读" value="已读"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作时间">
            <div class="block">
              <el-date-picker
                v-model="searchData.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="info" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <div id="line"></div>
        <el-button type="danger" id="del" @click="del()">删除</el-button>
        <el-button type="primary" id="read" @click="read()">标为已读</el-button>
        <el-button
          type="primary"
          id="allread"
          @click="toggleSelection(totaldata)"
          >全部标为已读</el-button
        >

        <el-table
          stripe
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" @click="aa()">
          </el-table-column>
          <el-table-column label="排序号" width="70">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column prop="originator" label="发件人" width="180">
          </el-table-column>
          <el-table-column
            prop="theme"
            label="主题"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="内容"
            width="400"
          ></el-table-column>
          <el-table-column prop="time" label="时间"> </el-table-column>
          <el-table-column prop="type" label="状态"> </el-table-column>
        </el-table>
        <div class="block block2">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="count"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalpage"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        type: "",
        people: "",
        time: "",
      },
      searchData2: [],
      totaldata: [],
      currentPage4: 1,
      count: 5,
      mypage: "",
    };
  },
  methods: {
    onSubmit() {
      this.currentPage4 = 1;
      if (
        this.searchData.people ||
        this.searchData.type ||
        this.searchData.time
      ) {
        let people = this.searchData.people ? this.searchData.people : "";
        let type = this.searchData.type ? this.searchData.type : "";
        let time = this.searchData.time ? this.searchData.time : "";
        this.page = 1;
        this.searchData2 = [people, type, time];
      } else {
        this.searchData = "";
      }
    },
    reset() {
      this.currentPage4 = 1;
      this.show();
      this.totaldata = [];
      this.searchData = {};
      this.searchData2 = [];
    },
    handleSizeChange(n) {
      this.count = n;
    },
    handleCurrentChange(n) {
      this.currentPage4 = n;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleAllSelection(row);
          this.$axios({
            url: "/personalcenter/mynews/allread",
          }).then(() => {
            this.show();
          });
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    read() {
      let aa = [];
      this.$refs.multipleTable.selection.forEach((v, i) => {
        aa[i] = v.id;
      });
      this.$axios({
        url: "/personalcenter/mynews/edit",
        params: { myid: aa },
      }).then((res) => {
        this.show();
      });
      this.toggleSelection();
    },
    del() {
      let aa = [];
      this.$refs.multipleTable.selection.forEach((v, i) => {
        aa[i] = v.id;
      });
      this.$axios({
        url: "/personalcenter/mynews/del",
        params: { myid: aa },
      }).then((res) => {
        this.show();
      });
      this.toggleSelection();
    },
    show() {
      // console.log(this.$store.state.data.name);
      this.$axios({
        url: "/personalcenter/mynews/get",
        params: { myname: JSON.parse(sessionStorage.getItem("user")).name },
      }).then((res) => {
        this.totaldata = res.data.data;
      });
    },
  },
  created() {
    this.show();
  },
  computed: {
    totalpage: function () {
      if (this.searchData2.length != 0) {
        return this.mypage;
      } else {
        return this.totaldata.length;
      }
    },
    tableData: function () {
      if (this.searchData2.length != 0) {
        this.mypage = 0;
        let arr = [];
        for (let i = 0; i < this.totaldata.length; i++) {
          if (
            new Date(this.totaldata[i].time) >=
              new Date(this.searchData2[2][0]) &&
            new Date(this.totaldata[i].time) <=
              new Date(this.searchData2[2][1]) &&
            this.totaldata[i].originator == this.searchData2[0] &&
            this.totaldata[i].type == this.searchData2[1]
          ) {
            arr.push(this.totaldata[i]);
            console.log(1);
          } else if (
            new Date(this.totaldata[i].time) >=
              new Date(this.searchData2[2][0]) &&
            new Date(this.totaldata[i].time) <=
              new Date(this.searchData2[2][1]) &&
            this.totaldata[i].originator == this.searchData2[0]
          ) {
            arr.push(this.totaldata[i]);
            console.log(2);
          } else if (
            this.totaldata[i].originator == this.searchData2[0] &&
            this.totaldata[i].type == this.searchData2[1]
          ) {
            arr.push(this.totaldata[i]);
            console.log(this.totaldata[i].originator, this.totaldata[i].type);
            console.log(3);
          } else if (
            new Date(this.totaldata[i].time) >=
              new Date(this.searchData2[2][0]) &&
            new Date(this.totaldata[i].time) <=
              new Date(this.searchData2[2][1]) &&
            this.totaldata[i].type == this.searchData2[1]
          ) {
            arr.push(this.totaldata[i]);
            console.log(4);
          } else if (
            this.totaldata[i].type == this.searchData2[1] &&
            this.searchData2[0] == "" &&
            this.searchData2[2] == ""
          ) {
            arr.push(this.totaldata[i]);
            console.log(7);
          } else if (
            this.totaldata[i].originator == this.searchData2[0] &&
            this.searchData2[2] == "" &&
            this.searchData2[1] == ""
          ) {
            arr.push(this.totaldata[i]);
            console.log(this.searchData2[1]);
          } else if (
            new Date(this.totaldata[i].time) >=
              new Date(this.searchData2[2][0]) &&
            new Date(this.totaldata[i].time) <=
              new Date(this.searchData2[2][1]) &&
            this.searchData2[0] == "" &&
            this.searchData2[1] == ""
          ) {
            arr.push(this.totaldata[i]);
            console.log(6);
          }
        }
        this.mypage = arr.length;
        return arr.slice(
          (this.currentPage4 - 1) * this.count,
          this.currentPage4 * this.count
        );
      } else {
        return this.totaldata.slice(
          (this.currentPage4 - 1) * this.count,
          this.currentPage4 * this.count
        );
      }
    },
  },
};
</script>
<style lang="less" scoped>
#mymain {
  margin-top: 20px;
}
#main {
  height: 70%;
}
.el-menu {
  padding-left: 20px;
}
#all {
  background-color: white;
  height: 100%;
  padding: 20px;
}
.el-form-item {
  margin-right: 20px;
}
#line {
  width: 100%;
  height: 0.1px;
  background-color: #e5e5e5;
  margin-bottom: 20px;
}
#del,
#read,
#allread {
  margin-bottom: 20px;
}
.block2 {
  margin-top: 30px;
  text-align: right;
}
</style>